<template>
  <v-layout>
    <template #header>
      <el-select v-model="school" placeholder="请选择学校"  @change="igetProdSupBindInfo($event)">
        <!-- @click.native="igetProdSupBindInfo1(item)" -->
        <el-option
          v-for="item in schoolList"
          :key="item.cshopid"
          :label="item.cshopname"
          :value="item.cshopid"
        />
      </el-select>
    </template>
    <v-table url="/productSupplier/getProdSupBindInfo" :query="tableQuery" AnyObject ref="tableRef">
      <v-column auto type="selection"></v-column>
      <v-column auto prop="cdesc" label="商品类别"></v-column>
      <v-column auto prop="ghName" label="当前绑定供应商"></v-column>
      <v-column auto prop="ghId" label="更改供应商"  :formatter="areaIdFormat">
        
          <template #default="{ row }">
           <!-- <div v-if="row.ghId">{{ row.ghName }}</div>  -->
           <el-select  :modelValue="getCorrectId(row.ghId, supplierList)" @update:modelValue="value => row.ghId = value" @change="selectGys($event)">
            <el-option
              v-for="item in supplierList"
              @click.native="selectGys1(item)"
              :key="item.ghId"
              :label="item.ghName"
              :value="item.ghId"
            />
        </el-select>
          </template>
        </v-column>
      <v-column #default="scope" auto prop="field2" label="绑定">
        <el-button size="small" @click="toBind(scope.row)">绑定</el-button>
      </v-column>
    </v-table>
  </v-layout>

 

</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { Delete } from "@element-plus/icons-vue";
import { markRaw, reactive, ref } from "vue";
import type { schoolData ,supplierData,bindSupplierOption} from "@/api/user/model";
import { useUserStore } from "@/stores/user";
import { ElMessage, ElMessageBox, type FormRules } from "element-plus";
import {
  getSchoolList,
  getPartnerInformationInfo,
  bindSupplier,
} from "@/api/user";

interface Data {
  cdesc: string;
  ghId: string;
  ghName:string;
  cclass:string;
  
}
function getCorrectId(id: string, supplierList: supplierData[]) {
  if(supplierList.find(item => item.ghId === id)) {
    return id;
  }else {
    return "";
  }
}

const { tableRef, getSelectionRows, reload } = useTable();

const tableQuery = reactive({
  cShopId:"5454"
})
const areaIdFormat =  (row) => {
  console.log(row,"789");
  
  // row.areaId = nane
  // supplierList.value.forEach(element => {
    
   
  // });
  // return  row.areaId
}
//查询供应商信息
const { tznUser } = useUserStore();
const areaId = reactive({
  mainSupplierId:tznUser.areaId
})
const supplierList = ref<supplierData[]>([]);
const supplier = ref<supplierData>({
  ghId: "",
  ghName: "",
  cclass: "",
  cdesc: ""
})
getPartnerInformationInfo(areaId).then((data) => {
  supplierList.value = data;
  // console.log(supplierList.value);
  // supplierList.value.forEach(element => {
  //   if (!element.ghId) {
  //     console.log("888");
      
  //   }
  // });
  // if (condition) {
    
  // }
});

const schoolList = ref<schoolData[]>([]);
const school = ref<schoolData>({
  cshopid: "",
  cshopname: "",
});

//获取学校信息
setTimeout(()=>{},1000)
 getSchoolList().then((data) => {
  schoolList.value = data;
  school.value = data[0].cshopid;
  tableQuery.cShopId = data[0].cshopid
  reload();
});
// tableQuery.cShopId=12
//根据学校选择
const igetProdSupBindInfo=(event:any)=>{
  tableQuery.cShopId = event;
  // console.log( schoolList.value.find(item  => item .cshopid === event));
  reload();
};

//根据学校选择
const igetProdSupBindInfo1=(item:any)=>{
  school.value = item;
  tableQuery.cShopId = item.cshopid;
  reload();
}


//选择供应商
const selectGys=(event:any)=>{
  
    supplier.value = event;
}
const selectGys1=(item:any)=>{
  
    supplier.value = item;
}

// 新增
const bindForm = reactive<bindSupplierOption>({
  scName:"",
  shopId:"",
  clName:"",
  cClass:"",
  ghName:"",
  ghId:""
});

const toBind = (row:Data) =>{
  // console.log( tableQuery);
 let list =  schoolList.value.find(item  => item .cshopid === tableQuery.cShopId)
  bindForm.scName = list.cshopname;
  bindForm.shopId =list.cshopid;
  // console.log(school.value.cshopid);
  
  bindForm.clName = row.cdesc;
  bindForm.cClass = row.cclass;
  bindForm.ghName = supplier.value.ghName;
  bindForm.ghId = supplier.value.ghId;
  ElMessageBox.confirm("所选商品将绑定新供应商，是否确定？", "提示", {
    type: "warning",
    async callback(action: string) {
      if (action === "confirm") {
        // 发送绑定请求
        await bindSupplier(bindForm);
        ElMessage.success("修改绑定信息成功");
        reload();
      }
    },
  });
};


</script>